<script setup lang="ts">
import { onActivated, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  }
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32
  }
]
const router = useRouter()
const jumpDetail = () => {
  router.push({
    name: 'task-detail'
  })
}
onMounted(() => {
  console.log('mounted list')
})
onActivated(() => {
  console.log('activated list')
})
defineOptions({
  name: 'task-list'
})
</script>

<template>
  <div>
    <a-table :columns="columns" :data-source="data">
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a @click.prevent="jumpDetail">{{ text }}</a>
        </template>
      </template>
    </a-table>
  </div>
</template>

<style scoped lang="scss"></style>
